<template>
    <el-row class="yard">
        <el-row type="flex" style="height: 40px;margin-bottom: 14px;position: relative">
            <el-button type="primary" size="medium" @click="addFirstYard" style="width: 100px;position: absolute;right: 0;">新增区域
            </el-button>
        </el-row>
        <el-row>
            <el-col :span="24">
                <el-table
                        :data="yardData"
                        style="width: 100%;font-size: 16px;"
                        height="730"
                        max-height="730"
                        row-key="uuid"
                        :header-cell-style="{background:'#e5ecf1',fontWeight: 'bold',textAlign: 'center'}"
                        border
                        highlight-current-row
                        :default-expand-all="false"
                        :tree-props="{children: 'subs', hasChildren: 'hasChildren'}">
                    <el-table-column prop="name" label="区域名称" min-width="90"></el-table-column>
                    <el-table-column prop="code" label="区域代码" min-width="50"></el-table-column>
                    <el-table-column prop="enabled" label="生效状态" width="90">
                        <template slot-scope="scope">
                            {{ ( scope.row.enabled === true ) ? "是" : "否" }}
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="280">
                        <template slot-scope="scope">
                            <el-button type="primary" size="mini" @click="addYard(scope.row)" icon="el-icon" v-show="scope.row.leaf == false">增加场地</el-button>
                            <el-button type="primary" size="mini" @click="addHrom(scope.row)" icon="el-icon" v-show="scope.row.leaf == true">添加房源</el-button>
                            <el-button type="primary" size="mini" @click="editMenu(scope.row)" icon="el-icon-edit">编辑</el-button>
                            <el-button type="danger" size="mini" @click="removeYard(scope.row)" icon="el-icon-delete">删除</el-button>
<!--                            <el-button type="text" @click="dialogTableVisible = true">打开房源列表</el-button>-->
                        </template>
                    </el-table-column>
                </el-table>
                <el-dialog title="房源信息" :visible.sync="dialogTableVisible">
                    <el-table
                            :data="hromData"
                            size="mini"
                            @current-change="userChge"
                            height="300"
                            max-height="450"
                            :header-cell-style="{background:'#e5ecf1',fontWeight: 'bold',textAlign: 'center'}"
                            highlight-current-row
                            border
                    >
                        <el-table-column
                                type="selection"
                                width="55">
                        </el-table-column>
                        <el-table-column prop="name" label="名称" min-width="90"></el-table-column>
                        <el-table-column prop="code" label="房号" min-width="50"></el-table-column>
                        <el-table-column prop="mea" label="面积(㎡)" min-width="50"></el-table-column>
                        <el-table-column prop="upic" label="单价(元)" min-width="50"></el-table-column>
                        <el-table-column prop="cbo" label="招商状态" min-width="60">
                            <template slot-scope="scope">
                                {{scope.row.cbo === 'A' ? '可招商' : ''}}
                                {{scope.row.cbo === 'B' ? '不可招商' : ''}}
                                {{scope.row.cbo === 'C' ? '即将履约' : ''}}
                                {{scope.row.cbo === 'D' ? '即将到期' : ''}}
                                {{scope.row.cbo === 'E' ? '已出租' : ''}}
                            </template>
                        </el-table-column>
                        <el-table-column prop="purp" label="房源用途" min-width="60">
                            <template slot-scope="scope">
                                {{scope.row.purp === 'A' ? '仓库' : ''}}
                                {{scope.row.purp === 'B' ? '商用' : ''}}
                                {{scope.row.purp === 'C' ? '自用' : ''}}
                                {{scope.row.purp === 'D' ? '广告位' : ''}}
                            </template>
                        </el-table-column>
                        <el-table-column prop="trimType" label="装修类型" min-width="60">
                            <template slot-scope="scope">
                                {{scope.row.trimType === 'A' ? '毛胚' : ''}}
                                {{scope.row.trimType === 'B' ? '简装' : ''}}
                                {{scope.row.trimType === 'C' ? '精装' : ''}}
                            </template>
                        </el-table-column>
                        <el-table-column prop="punt" label="计价单位" min-width="60">
                            <template slot-scope="scope">
                                {{scope.row.punt === 'A' ? '元/月' : ''}}
                                {{scope.row.punt= 'B' ? '元/天' : ''}}
                                {{scope.row.punt === 'C' ? '元/m2*月' : ''}}

                                {{scope.row.punt === 'D' ? '元/m2*天' : ''}}
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-row type="flex" justify="center" class="pagination">
                        <el-pagination
                                @size-change="userSize"
                                @current-change="pgChge"
                                :current-page="hromPage.currentPage"
                                :page-sizes="[10, 20, 30]"
                                :page-size="hromPage.pageSize"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="hromPage.totalElements"
                        ></el-pagination>
                    </el-row>
                </el-dialog>
                <transition name="el-fade-in">
                    <floatingBox v-show="editBoxShow">
                        <addFirstYard v-if="addFirstShow" slot="edit" @editState="editState"></addFirstYard>
                        <addYard v-if="addShow" slot="edit" :yardUuid="uuid" @editState="editState"></addYard>
                        <editYard v-if="editShow" slot="edit" :yardUuid="uuid" @editState="editState"></editYard>
                        <addHrom v-if="addHromShow" slot="edit" :yardUuid="uuid" @editState="editState"></addHrom>
                    </floatingBox>
                </transition>
            </el-col>
        </el-row>
    </el-row>
</template>

<script>
    import floatingBox from "../public/floatingBox.vue";
    import addFirstYard from "./addFirstYard.vue";
    import editYard from "./editYard.vue";
    import addYard from "./addYard.vue";
    import addHrom from "../hrom/hromListRef.vue";

    export default {
        name: "yard",
        components: {floatingBox, addFirstYard, editYard, addYard, addHrom},
        data() {
            return {
                treeProps: {label: 'name', id: 'id', children: 'children'},
                editBoxShow: false,
                addFirstShow: false,
                addShow: false,
                editShow: false,
                addHromShow: false,
                defaultExpandAll: false,
                yardData: [],
                menuEdit: false,
                uuid: '',
                menuProps: {
                    children: 'subs',
                    label: 'name'
                },
                dialogTableVisible: false,
                hromData: [],
                hromPage: {
                    pageSize: 10,//每页显示条目个数
                    currentPage: 1,//当前页数
                    totalElements: 0,
                    searchData: {
                        srhData: ''
                    }
                }
            };
        },
        mounted() {
            this.queryYard();
        },
        methods: {
            refreshPage() {
                this.$router.replace({
                    path: '/refresh',
                    query: {
                        t: Date.now()
                    }
                })
            },
            editState(msg) {
                this.editBoxShow = msg;
                this.addFirstShow = msg;
                this.editShow = msg;
                this.addShow = msg;
                this.addHromShow = msg;
                this.menuEdit = msg;
                this.refreshPage();
            },
            addFirstYard() {
                this.editBoxShow = true;
                this.addFirstShow = true;
            },
            addYard(val) {
                this.uuid = val.uuid;
                this.editBoxShow = true;
                this.addShow = true;
                this.menuEdit = true;
            },
            addHrom(val) {
                this.uuid = val.uuid;
                this.editBoxShow = true;
                this.addHromShow = true;
            },
            editMenu(val) {
                this.uuid = val.uuid;
                this.editBoxShow = true;
                this.editShow = true;
                this.menuEdit = true;
            },
            //删除菜单节点
            removeYard(val) {
                this.$confirm('确认删除 ' + val.name + " ?", '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.axios.request({
                        method: "delete",
                        url: "./ope/kdi/yard/" + val.uuid,
                        data: {}
                    }).then(() => {
                        this.refreshPage();
                        this.$message({
                            message: "删除成功!",
                            type: 'success'
                        });
                    }).catch(error => {
                        console.log(error);
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                });
            },
            //查询总量菜单
            queryYard() {
                this.axios.request({
                    method: "get",
                    url: "./ope/kdi/yard/search/findAllTree",
                    params: {}
                }).then(response => {
                    this.yardData = response.data;
                }).catch(error => {
                    console.log(error);
                });
            }
        }
    };
</script>

<style scoped>
    .yard {
        width: calc(100% - 100px);
    }


</style>